<template>
	<div class="tabbar">
		<template v-for="(item, index) in tabbarData" :key="index">
			<div class="tab-bar-item" :class="{ active: currentIndex === index }" @click="itemClick(item, index)">
				<img :src="getAssetURL(item.image)" alt="" v-if="currentIndex !== index" />
				<img :src="getAssetURL(item.imageActive)" alt="" v-else />
				<div class="text">{{ item.text }}</div>
			</div>
		</template>
	</div>
</template>

<script setup>
	import tabbarData from '@/assets/data/tabbar'
	import { getAssetURL } from '@/utils/load_assets'
	import { ref } from 'vue'
	import { useRouter } from 'vue-router'

	const currentIndex = ref(0)
	const router = useRouter()
	const itemClick = (item, index) => {
		currentIndex.value = index
		router.push(item.path)
	}
</script>

<style lang="less" scoped>
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		// 默认tabbar为50px或55px
		height: 50px;
		display: flex;
		z-index: 1;
		border-top: 1px solid #f3f3f3;
		.tab-bar-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			img {
				width: 32px;
			}
			.text {
				font-size: 12px;
				margin-top: 2px;
			}

			&.active {
				color: var(--primary-color);
			}
		}
	}
</style>
